<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>消息管理</title>
    <%@include file="../../public/commonCss.jsp" %>
    <%@include file="../../public/commonJs.jsp" %>
    <%@include file="../../public/ueditor.jsp" %>

    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/message.css"/>
</head>
<body ms-controller="main" class="ms-controller">
<div id="wrapper">
    <div class="boxmain whiteBox lrbox">
        <div class="lrboxleft borderR" style="width:25%">
            <div class="from-header borderB contentbox">
                <div>
                    <span class="font14"> 所属分类:</span><a id="category"><span class=" fontOrange2">历史资讯</span></a>
                    <button class="layui-btn layui-btn-small" style="float: right" onclick="buildMsg()">发布新资讯</button>
                </div>
            </div>
            <div class="from-body withheader contentbox " style=" overflow: auto;">
                <div class="box" ms-repeat="tableData">
                    <div class="box-tit">
                        更新时间：<span style="color:red;">{{el.modifyTime}}</span>
                        <span class="fr">
                            <i class="layui-icon" style="font-size: 20px;color: #1aa094;" ms-if="el.status==1"
                               title="已发送">&#xe618;</i>
                            <i class="layui-icon" style="font-size: 16px;color: #1aa094;" ms-if="el.status==0"
                               title="未发送">草稿</i>
                            <i class="layui-icon" style="font-size: 20px;color: red;cursor: pointer;"
                               ms-on-click="deleteNo(el)">&#xe640;</i>
                        </span>
                    </div>
                    <div class="box-con">
                        <p>
                            {{el.title|truncate(20)}}
                        </p>
                        <div style="text-align: center">
                            <img class="img" ms-attr-src="el.coverPicAllUrl" ms-if="el.coverPicAllUrl!=''">
                            <img class="img" src="${ctx}/static/images/message/default.png"
                                 ms-if="el.coverPicAllUrl==''">
                        </div>
                        <p>
                            &nbsp;&nbsp;&nbsp;&nbsp;{{el.subContent|truncate(40)}}
                        </p>
                        <div class="mask" ms-on-click="showMsg(el)"><span>点击查看</span></div>
                    </div>
                    <div class="box-fj">
                    </div>
                </div>
            </div>
        </div>
        <div class="lrboxmain borderL" style="margin-left:25%">
            <div class="from-header borderB">
                <span class="font14">发布资讯</span>
                <span class="fr">
                         <button class="layui-btn layui-btn-small" onClick="preView()">预览</button>
                </span>
            </div>
            <div class="from-body withheader contentbox8 layui-form layui-form-pane" style=" overflow: auto;">
                <input type="hidden" name="id">
                <div style="width: 100%;;float: left">
                    <div class="layui-form-item tt2">
                        <input type="file" name="imgFile" id="file1" class="layui-upload-file" lay-title="上传封面">
                        <span id="imgFile">
                            <span id="imgName"></span>
                            <input type="hidden" name="coverPic">
                            <input type="hidden" name="coverPicName">
                            <button class="layui-btn layui-btn-primary layui-btn-small" title="删除封面"
                                    onclick="deleteCover()">
                                <i class="layui-icon" style="font-size: 30px;">&#xe640;</i>
                            </button>
                        </span>
                    </div>
                    <div class="layui-form-item tt2">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block">
                            <input type="text" style="width: 100%" placeholder="请输入标题" lay-verify="required"
                                   class="layui-input t2"
                                   name="title">
                        </div>
                    </div>
                    <div class="layui-form-item tt2">
                        <label class="layui-form-label">摘要</label>
                        <div class="layui-input-block">
                            <input type="text" style="width: 100%" placeholder="默认获取消息内容前64个字符。" class="layui-input t2"
                                   name="subContent">
                        </div>
                    </div>
                    <div class="layui-form-item tt2">
                        <textarea id="container" name="container" style="width: 100%; height: 400px; margin: 0 auto;">
                        </textarea>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">保存到草稿</button>
                            <button class="layui-btn" lay-submit="" lay-filter="demo2">立即发送</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- whitebox -->
</div>
<script type="text/javascript">
    var vm;
    var ue;
    var form = layui.form();
    avalon.ready(function () {
        vm = avalon.define({
            $id: "main",
            tableData: []
        });
        avalon.scan();
    });
    $(function () {
        loadTableData();
        ue = UE.getEditor("container");
        $("#imgFile").hide();
        $("#contentFile").hide();
        layui.upload({
            url: '${ctx}/messageController/uploadImage.action?type=1', //上传接口
            ext: 'jpg|png|JPG|PNG',
            elem: '#file1',
            success: function (res) { //上传成功后的回调
                if (res.code == 0) {
                    console.log(res);
                    $("#imgFile").show();
                    $("#imgName").text(res.data.title);
                    $("input[name='coverPic']").val(res.data.src);
                    $("input[name='coverPicName']").val(res.data.title);
                }
            }
        });
        form.verify({
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
        });
        //监听提交
        form.on('submit(demo1)', function (data) {
            data.field["content"] = ue.getContentTxt();
            data.field["contentHtml"] = ue.getContent();
            $.ajax({
                type: 'post',
                url: '${ctx}/messageController/saveOrUpdate.action',
                data: data.field,
                dataType: "json",
                timeout: 10000,
                success: function (data) {
                    if (data.code == 0) {
                        layui.layer.msg('保存成功', {icon: 1});
                        loadTableData();
                        $("input[name='id']").val(data.noticeMessage.id);
                    } else if (data.code == -2) {
                        layui.layer.msg('内容不能为空或者内容字数少于50字。', {icon: 2});
                    } else {
                        layui.layer.msg('保存失败，请重试', {icon: 2});
                    }
                }
            });
            return false;
        });

        //监听提交
        form.on('submit(demo2)', function (data) {
            //询问框
            layer.confirm('你确定发送吗？', {
                skin: 'layui-layer-molv' //样式类名
                , btn: ['确定', '取消'] //按钮
            }, function () {
                closeDialog();
                data.field["content"] = ue.getContentTxt();
                data.field["contentHtml"] = ue.getContent();
                $.ajax({
                    type: 'post',
                    url: '${ctx}/messageController/sendMessage.action',
                    data: data.field,
                    dataType: "json",
                    timeout: 10000,
                    beforeSend: function () {
                        layerUtil.loading();
                    },
                    success: function (data) {
                        closeDialog();
                        if (data.code == 0) {
                            //墨绿深蓝风
                            layer.alert('发送成功', {
                                skin: 'layui-layer-molv' //样式类名
                                , title: '提示'
                                , closeBtn: 0
                            }, function () {
                                window.location.reload();
                            });
                        } else {
                            layui.layer.msg('保存失败，请重试', {icon: 5, anim: 6});
                        }
                    }
                });
            });
            return false;
        });

    });

    //构建新公告
    function buildMsg() {
        window.location.reload();
    }

    //显示消息
    function showMsg(el) {
        if (el.$model.status == 0) {
            $("#imgFile").show();
            $("#contentFile").show();
            $("#imgName").text(el.$model.coverPicName);
            $("input[name='id']").val(el.$model.id);
            $("input[name='coverPic']").val(el.$model.coverPic);
            $("input[name='coverPicName']").val(el.$model.coverPicName);
            $("input[name='title']").val(el.$model.title);
            $("input[name='subContent']").val(el.$model.subContent);
            ue.setContent(el.$model.contentHtml);
        } else {
            var url = '${ctx}/webApp/showMsg/' + el.$model.id + '/000'
            layerUtil.iFrame(url, el.$model.title, ['450px', '90%']);
        }
    }

    function preView() {
        var url = "${ctx}/webView/noticeShow"
        var dataStr = {
            coverPic: $("input[name='coverPic']").val(),
            sendTime: getNowFormatDate(),
            title: $("input[name='title']").val(),
            contentHtml: ue.getContent()
        }
        layerUtil.preview(url, dataStr, "预览", ['450px', '90%']);
    }

    //加载表格数据
    function loadTableData() {
        $.ajax({
            type: 'post',
            url: '${ctx}/messageController/selectAllNoticeMsg.action',
            data: "",
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                if (data.code == 0) {
                    vm.tableData = data.tableData;
                }
            }
        });
    }

    //删除资讯
    function deleteNo(el) {
        layerUtil.confirm("你确定删除吗？", function () {
            var url = "${ctx}/messageController/deleteById.action?id=" + el.id;
            ajaxUtil.post(url, "", true, function (data) {
                loadTableData();
                layerUtil.success("删除成功");
            })
        })
    }

    //删除封面
    function deleteCover() {
        $("#imgFile").hide();
        $("input[name='coverPic']").val("");
        $("input[name='coverPicName']").val("");
    }
</script>
</body>
</html>